<!doctype html>
<html>
<head>
<title>#42</title>
<meta charset='utf-8' />

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name='apple-mobile-web-app-capable' content='yes' />
<!--
	MUST be viewed on an iOS 5+ device


	This is a layout for iOS 5+.
	The basic idea is to have a navigation bar that always pins to the top.
	The lower part is a scrollable content wrapper (with momemtum scrolling).


	Here, we apply FastClick to the content wrapper.
	Now when you scroll the content really fast, and click the link before the scrolling stops.
	Chances are what you have clicked is not what see under your finger, but rather the link which lay at that position sometime during your scroll.

-->
<style>
#everything {
	position: absolute;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	height: 100%;
}
#content {
	-webkit-box-flex: 1;
}
#content {
	overflow: scroll;
	position: relative;
	-webkit-overflow-scrolling: touch;
}
#content > * {
	-webkit-transform: translate3d(0,0,0);
}
a {
	display: block;
	background: #aaa;
	padding: 10px 0;
	margin: 5px 0;
	height: 200px;
	font-size: 22px;
	line-height: 200px;
	vertical-align: center;
	text-align: center;
}
#everything {
	width: 100%;
	margin: 0 auto;
}
#content {
	width: 100%;
}
</style>

<script src="../lib/fastclick.js"></script>
<script>
	window.addEventListener('load', function() {
		new FastClick(document.getElementById('content'))
		
		document.addEventListener('touchstart', function(event) {
			console.log('start @ ' + event.pageY);
		}, false);

		document.addEventListener('touchmove', function(event) {
			console.log('move @ ' + event.pageY);
		}, false);

		document.addEventListener('touchend', function(event) {
			console.log('end @ ' + event.pageY);
		}, false);

		document.addEventListener('click', function(event) {
			if (event.target.tagName.toLowerCase() === 'a') {
				console.log('clicked ' + event.target.textContent);
			}
		}, false);

	}, false);
</script>
</head>
<body>
<div id="everything">
	<div id="content" class="ios5">
		<a>1</a>
		<a>2</a>
		<a>3</a>
		<a>4</a>
		<a>5</a>
		<a>6</a>
		<a>7</a>
		<a>8</a>
		<a>9</a>
		<a>10</a>
		<a>11</a>
		<a>12</a>
		<a>13</a>
		<a>14</a>
		<a>15</a>
		<a>16</a>
		<a>17</a>
		<a>18</a>
		<a>19</a>
		<a>20</a>
		<a>21</a>
		<a>22</a>
		<a>23</a>
		<a>24</a>
		<a>25</a>
		<a>26</a>
		<a>27</a>
		<a>28</a>
		<a>29</a>
		<a>30</a>
		<a>31</a>
		<a>32</a>
		<a>33</a>
		<a>34</a>
		<a>35</a>
		<a>36</a>
		<a>37</a>
		<a>38</a>
		<a>39</a>
		<a>40</a>
		<a>41</a>
		<a>42</a>
		<a>43</a>
		<a>44</a>
		<a>45</a>
		<a>46</a>
		<a>47</a>
		<a>48</a>
		<a>49</a>
		<a>50</a>
		<a>51</a>
		<a>52</a>
		<a>53</a>
		<a>54</a>
		<a>55</a>
		<a>56</a>
		<a>57</a>
		<a>58</a>
		<a>59</a>
		<a>60</a>
		<a>61</a>
		<a>62</a>
		<a>63</a>
		<a>64</a>
		<a>65</a>
		<a>66</a>
		<a>67</a>
		<a>68</a>
		<a>69</a>
		<a>70</a>
		<a>71</a>
		<a>72</a>
		<a>73</a>
		<a>74</a>
		<a>75</a>
		<a>76</a>
		<a>77</a>
		<a>78</a>
		<a>79</a>
		<a>80</a>
		<a>81</a>
		<a>82</a>
		<a>83</a>
		<a>84</a>
		<a>85</a>
		<a>86</a>
		<a>87</a>
		<a>88</a>
		<a>89</a>
		<a>90</a>
		<a>91</a>
		<a>92</a>
		<a>93</a>
		<a>94</a>
		<a>95</a>
		<a>96</a>
		<a>97</a>
		<a>98</a>
		<a>99</a>
		<a>100</a>
	</div>
</body>
</html>